<template>
  <div class="web-oss">
    <div class="oss-main">
      <FSheader />
      <filesystem />
    </div>
  </div>

</template>

<script>
import Weboss from '@/views/ali-oss-manage/web-oss'
import Filesystem from '@/views/ali-oss-manage/home'
import FSheader from '@/components/AliOss/FSheader'

export default {
  name: 'OssFilesystem',

  components: { FSheader, Filesystem, Weboss },
  watch: {
    'this.$route.path': function(to) {
      this.resetPageFun(to)
      this.resetUserInfoFun()
    }
  },
  created() {
    this.resetPageFun()
  },
  mounted() {
    this.resetUserInfoFun()
  },
  methods: {
    // 更新路由，重置页面
    resetPageFun(to) {
      const client = JSON.parse(window.localStorage.getItem('client'))
      if (!client) {
        this.$router.push('/oss-login/login')
        return
      }
      this.$store.commit('stateUpdate', {
        name: 'headerVisible',
        data: true
      })
    },
    // 更新用户信息
    resetUserInfoFun() {
      const { bucket, accessKeyId } =
      JSON.parse(window.localStorage.getItem('ossInfo')) || {}
      this.$store.commit('stateUpdate', { name: 'bucket', data: bucket })
      this.$store.commit('stateUpdate', {
        name: 'accessKeyId',
        data: accessKeyId
      })
    }
  }
}

</script>

<style scoped>
@import url("../../assets/css/ress.scss");
@import url("http://at.alicdn.com/t/font_2373078_qxhhuv1bnrp.css");
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
.web-oss {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px;
  box-sizing: border-box;
}
.oss-main {
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  position: relative;
  padding-top: 60px;
  box-sizing: border-box;
}

</style>
